<template>
<div id="main">
    <!-- 最上面导航栏 -->
    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" id="top">
        <el-menu-item index="2"><img src="../assets/HomeImage1/top1.png" /></el-menu-item>
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="3"><img src="../assets/HomeImage1/top2.png" style="width: 80px" /></el-menu-item>
        <el-menu-item index="4">渠道合作</el-menu-item>
        <el-submenu index="5">
            <template slot="title">解决方案</template>
            <el-menu-item index="5-1">申请机构版</el-menu-item>
            <el-menu-item index="5-2">本地化部署</el-menu-item>
        </el-submenu>
        <el-menu-item index="6">帮助中心</el-menu-item>
        <el-submenu index="7">
            <template slot="title">更多</template>
            <el-menu-item index="7-1">会员权益</el-menu-item>
            <el-menu-item index="7-2">产品动态</el-menu-item>
        </el-submenu>
        <el-menu-item index="8">试用新版</el-menu-item>
        <el-button style="margin-left: 80px" @click="login()">登录</el-button>
        <el-button type="primary" plain style="background-color:rgb(53,122,232); border: none" @click="register()">注册</el-button>
    </el-menu>
    <!-- 最上面轮播图 -->
    <div class="block">
        <el-carousel height="540px">
            <el-carousel-item v-for="item in 2" :key="item"> </el-carousel-item>
        </el-carousel>
    </div>
    <!-- 视频 -->
    <div class="video">
        <h2 style="text-align: center;">
            【专家报告视频会】钟南山、李兰娟、张文宏同台指导学校疫情防控工作
        </h2>
        <p style="font-size:16px">
            4月20日下午3点，教育部召开学校疫情防控专家报告视频会，会议深入贯彻习近平总书记重要指示批示精神和党中央、国务院决策部署，指导各地各校全面做好学校疫情防控工作…<a href="https://mp.weixin.qq.com/s/dGMZOYUzk0cKnIZRirr1AA" target="_blank" style="color:rgb(68,192,241)">&gt;&gt;查看内容</a>
        </p>
        <div style="padding:10px 120px">
            <video controls="" preload="auto" style="width:700px;" src="https://assets.ketangpai.com/20200420/0420yiqingedu.mp4"></video>
        </div>
    </div>
    <!-- 中间八个盒子部分 -->
    <el-row :gutter="20" class="box">
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <img src="../assets/HomeImage1/Whome1.png" alt="" />
                <h2>极简教学主义</h2>
                <p>
                    无安装，无插件，无需专门学习；掌握简单，三分钟上手；不改变教学习惯，让课堂更精彩，让教学更高效！
                </p>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <img src="../assets/HomeImage1/Whome2.png" alt="" />
                <h2>远程直播互动教学</h2>
                <p>
                    一键开启直播，共享电脑屏幕，替代教室投影仪/黑板，像在教室里一样互动教学。直播录像自动保存，可查看课堂直播教学统计和再次回顾学习。
                </p>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <img src="../assets/HomeImage1//Whome3.png" alt="" />
                <h2>有趣的课堂互动</h2>
                <p>
                    提供丰富的教学互动创新场景，上传原生PPT课件进行讲解，手机遥控，标记疑问，评论，开启弹幕，抢答，提问，讨论，随时奖励学生表现，让课堂更精彩。
                </p>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <img src="../assets/HomeImage1/Whome4.png" alt="" />
                <h2>随堂互动答题</h2>
                <p>
                    随时编辑互动答题：投票、评价、匿名开放、拍照、选择、判断、简答等多种题型，实时分析互动答题情况，一键词云提取学生有效观点，及时检验教学效果
                </p>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <img src="../assets/HomeImage1/Whome5.png" alt="" />
                <h2>精准的考勤签到</h2>
                <p>
                    二维码，数字口令，GPS，传统考勤等多种考勤形式；杜绝代签，一键导出考勤记录
                </p>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <img src="../assets/HomeImage1/Whome6.png" alt="" />
                <h2>作业神器</h2>
                <p>
                    81种文档格式作业在线展示和批阅，随时随地批改作业；实时查重，精准比对，避免学生抄袭；自动管理成绩，一键下载作业数据
                </p>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <img src="../assets/HomeImage1/Whome7.png" alt="" />
                <h2>智能成绩管理</h2>
                <p>
                    汇总考勤、表现、作业、测试、平时成绩、期末成绩；自由调整成绩权重，汇总最终教学成绩，科学权威
                </p>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <img src="../assets/HomeImage1/Whome8.png" alt="" />
                <h2>教学全过程数据分析</h2>
                <p>
                    教学全过程活动数据自动生成，实时查看课程和学生数据面板和报表，教学数据可留存，可追溯
                </p>
            </div>
        </el-col>
    </el-row>
    <!-- 中间长盒子部分 -->
    <el-container style="background-color:white">
        <el-aside style="width: 500px;margin-left: 280px;"><img src="../assets/HomeImage1/center1-1.png" /></el-aside>
        <el-main>
            <img src="../assets/HomeImage1/center1-2.png" style="width:40px" />
            <h5>远程直播，在线互动教学</h5>
            <ul>
                <li>无安装，操作简单</li>
                <li>在线实时互动，全过程教学统计</li>
                <li>自动录播，再次回顾，保留教学资产</li>
            </ul>
        </el-main>
    </el-container>

    <el-container style="background-color:rgb(83,151,255); ">
        <el-aside style="width: 500px; margin-left: 280px;"><img src="../assets/HomeImage1/center2-1.png" style="width:40px; padding-top:50px" />
            <h5 style="color:white">精品课程，在线自主学习</h5>
            <p style="color:white; font-size:18px">
                北大领航，集高校精品课程，免费向社会开放，惠及全球华人
            </p>
            <p style="color:white; font-size:18px">
                课堂派教学资源互相共享，打造线上金课，混合金课，共建金课
            </p>
        </el-aside>
        <el-main>
            <img src="../assets/HomeImage1/center2-2.png" style="border:none; background-size: 100%" />
        </el-main>
    </el-container>

    <el-container style="background-color:white">
        <el-aside style="width: 500px;margin-left: 280px;"><img src="../assets/HomeImage1/center3-1.png" /></el-aside>
        <el-main>
            <img src="../assets/HomeImage1/center3-2.png" style="width:40px" />
            <h5 style="color:black">混合教学，全过程管理</h5>
            <ul style="width:465px; list-style: none;">
                <li style="display: flex;">
                    <span class="ds">课前备课：</span><span>创建课堂，轻松开启教学，发布预习</span>
                </li>
                <li style="display: flex;">
                    <span class="ds">课中互动：</span><span>上传原生课件，随堂互动答题，提供多种互动创新场景，让课堂活起来</span>
                </li>
                <li style="display: flex;">
                    <span class="ds">课后巩固：</span><span>随时随地发布话题，测试，作业，在线批阅，实时查重，自动管理教学成绩，教学过程自动分析，可留存，可追溯</span>
                </li>
            </ul>
        </el-main>
    </el-container>

    <!-- 最下面轮播图 -->
    <!-- <el-carousel indicator-position="outside" class="block-last">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel> -->
    <!-- 显示学校 -->
    <el-container style="background-color:white" class="school">
        <el-header>
            <h3><span>6000+ </span>学校正在使用课堂派</h3>
        </el-header>
        <el-main>
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <img src="../assets/HomeImage1/1.png" /></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <img src="../assets/HomeImage1/2.png" /></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <img src="../assets/HomeImage1/3.png" /></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <img src="../assets/HomeImage1/4.png" /></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <img src="../assets/HomeImage1/5.png" /></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <img src="../assets/HomeImage1/6.png" /></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <img src="../assets/HomeImage1/7.png" /></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <img src="../assets/HomeImage1/8.png" /></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <img src="../assets/HomeImage1/9.png" /></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <img src="../assets/HomeImage1/10.png" /></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <img src="../assets/HomeImage1/11.png" /></div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <img src="../assets/HomeImage1/12.png" /></div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>

    <Bottom></Bottom>
</div>
</template>

<style>
/* 整个盒子设置居中 */
#main {
    width: 1518px;
    margin: 0 auto;
    background-color: rgb(236, 236, 236) !important;
}

a {
    text-decoration: none;
}

/* 顶部导航栏 */
#top {
    border-bottom: none !important;
    background-color: rgb(39, 46, 56) !important;
}

.el-menu--horizontal>.el-submenu .el-submenu__title {
    margin-top: -6px;
}

#top .el-menu-item,
#top .el-submenu__title {
    font-size: 16px;
    padding-right: 40px;
    color: white !important;
    border-bottom-color: rgb(39, 46, 56) !important;
    background-color: rgb(39, 46, 56) !important;
}

#top .el-menu-item:hover,
#top .el-submenu__title:hover {
    font-size: 16px;
    padding-right: 40px;
    background-color: rgb(33, 39, 48) !important;
}

#top .el-menu-item:active {
    background-color: rgb(44, 88, 171) !important;
}

#top .el-menu-item:visited {
    background-color: rgb(44, 88, 171) !important;
}

#top .el-button {
    margin: 10px 20px;
    color: white;
    background-color: rgb(39, 46, 56);
}

#top .el-button:hover:first-of-type {
    color: white;
    border-color: rgb(77, 144, 254) !important;
}

#top .el-button:hover:last-of-type {
    color: white;
    background-color: rgb(77, 144, 254) !important;
}

/* 最上面轮播图 */
.block {
    margin-top: 0px !important;
}

.block .el-carousel__item:nth-child(2n) {
    background-image: url(../assets/HomeImage1/big1.png);
    background-repeat: no-repeat;
}

.block .el-carousel__item:nth-child(2n + 1) {
    background-image: url(../assets/HomeImage1/big2.png);
    background-repeat: no-repeat;
}

/* 视频 */
.video {
    width: 980px;
    margin: -150px auto 0;
    padding: 0 20px;
    height: 600px;
    border-radius: 4px;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    background-color: #fff;
}

/* 中间八个小盒子 */
.box {
    width: 1000px;
    margin: 0 250px;
}

.el-row {
    margin: 0 262px !important;
}

.box .el-col-6 {
    list-style: none;
    width: 222px;
    height: 260px;
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px rgba(4, 0, 0, 0.1);
    border-radius: 4px;
    margin-top: 25px;
    display: inline-block;
    box-sizing: border-box;
    margin: 12px;
}

.box img {
    padding-left: 50px;
}

.box h2 {
    font-size: 20px;
    text-align: center;
}

.box p {
    display: inline-block;
    padding: 0 5px;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 4px;
}

/* 中间长盒子部分 */
.ds {
    font-weight: bold;
    flex: 0 0 95px;
}

h5 {
    font-size: 30px;
    color: rgb(66, 133, 244);
}

li::marker {
    color: rgb(66, 133, 244);
}

li {
    color: black;
    padding: 5px 0;
    font-size: 18px;
}

/* 学校部分 */
.school .el-col-6 {
    padding: 20px;
}

.school .el-header {
    text-align: center;
    font-size: 20px;
}

.school span {
    color: #32baf0;
}
</style>

<script>
import Bottom from "../components/bottom";
export default {
    components: {
        Bottom
    },
    data() {
        return {
            activeIndex: "1",
            activeIndex2: "1"
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        login: function () {
            window.location.href = "/login";
        },
        register: function () {
            window.location.href = "/register";
        }
    }
};
</script>
